<template>
    <div  class="layout-container"  >
         <header>
            <span>{{ title }}</span>
            <div>
                <i v-if="showHome" @click="$router.push('/home')" class="home"></i>
                <i v-if="showBack" @click="$router.go(-1)" class="back"></i>
                <i v-if="showNew" @click="$emit('newBtnEvt')" class="new r"></i>
            </div>
         </header>
         <article>
          <!--插槽-->
               <slot/>
         </article>
  
    </div>
  </template>
  
  <script>
    export default {
                props:{
                    showHome:{
                        type:Boolean,
                        default:true
                    },

                    showBack:{
                        type:Boolean,
                        default:false
                    },
                    showNew:{
                        type:Boolean,
                        default:false
                    },
                    title:{
                        type:String,
                        required:true
                    }

                }
    }
  </script>

  
  <style    lang="less"   scoped>

         @import '../style/common.less';

         .layout-container{
            display: block;
            position: relative;
            height: 100%;

            >header{
                 display: block;
                 position: relative;
                 height: 48px;
                 background-color: @primary; 
                >span{
                     display: block;
                     height: 100%;
                     font-size: 1rem;
                     color: @cf;
                     line-height: 48px;
                     text-align: center;
                } 
                >div{
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                padding:  8px 12px;
                >i{
                    float: left;
                    width: 32px;
                    height: 32px;
                    margin-right: 10px;
                    background-position: center;
                    background-size: 24px;
                    background-repeat: no-repeat;

                    &.home{
                        background-image: url(../images/home.png);

                    }
                   &.back{
                        background-image: url(../images/back.png);
                        
                    }
                    &.new{
                        background-image: url(../images/add-icon.png);
                        
                    }
                    &.r{
                       margin-right: 0;
                       margin-left: 10px;
                       float: right;
                        
                    }
                }
                  //调用less方法，清除浮动，这里有塌陷问题
                .clear()

            }
            }

           >article{
             display: block;
             position: relative;
             height: calc(100% - 48px);
             overflow-x:hidden;
           }
         }    

  
  </style>